<template>
    <div class="crumb">
        <span v-for="(item, index) in navs" :key="index">
            <!-- 最后一行颜色高亮 -->
            <span :style="{ color: index == navs.length - 1 ? '#33336e' : '#999999' }">
                {{ item.name }}
            </span>
            <!-- 不显示最后一个  / -->
            <i v-show="index < navs.length - 1">/</i>
        </span>
    </div>
</template>

<script>
export default {
    props: ['navs'],
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.crumb {
    margin: 10px 0;
    i {
        padding: 0 5px;
    }
}
</style>
